<template>
  <div class="ip_detail">
    <tableSearch :searchCol="searchCol">
      <i-input autocomplete="off" slot="keyword" v-model="keyword" :placeholder="$t('views.ip_detail.enterUserId')" size='small'/>

      <div slot="button">
        <div class="actionBox">
          <div>
            <!--<Checkbox-->
              <!--:value="aboutCheck.checkAll"-->
              <!--@click.prevent.native="handleCheckAll">{{ $t('views.ip_detail.chooseAll') }}</Checkbox>-->
            <Button size='small' type="primary" @click="postClient">{{ $t('views.public.query') }}</Button>
            <!--<Button size='small' type="primary" @click="allBlockClick">{{ $t('views.ip_detail.banAll') }}</Button>-->
            <!--<Button size='small' type="primary" @click="blockClick">{{ $t('views.ip_detail.banChooseUser') }}</Button>-->
          </div>
        </div>
      </div>
    </tableSearch>

    <div class="tableBox">
      <!--<CheckboxGroup v-model="aboutCheck.checkAllGroup" style="font-size: 12px;" @on-change="checkAllGroupChange">-->
        <tableBox :columns="titleList" :list="tablesList" :loading="false">
          <!--<div slot="choose" slot-scope="{ item }">-->
            <!--<Checkbox style="font-size: 0;" :label="item.id"></Checkbox>-->
          <!--</div>-->
          <div slot="user_no" slot-scope="{ item }">
            <div>{{ item.user_no }}</div>
            <!--<div v-if="item.clousure_id !== 1" style="color: red;">-->
              <!--{{ item.clousure_id === 2 ?-->
              <!--`${ $t('views.moreUserUpList.banTimeTo') }: ${ timestampTime(item.clousure_id_time) }` :-->
              <!--$t('views.moreUserUpList.permanentBan') }}-->
            <!--</div>-->
          </div>
          <div slot="createtime" slot-scope="{item}">
            {{timestampToTime(item.createtime)}}
          </div>
          <div slot="money" slot-scope="{item}">
            ${{item.money}}
          </div>
          <div slot="login_time" slot-scope="{ item }">
            {{ timestampToTime(item.login_time) }}
          </div>
        </tableBox>
      <!--</CheckboxGroup>-->
    </div>
    <div class="page">
      <Page :current="pn" :total="total" :page-size="page" @on-change="changePage"></Page>
    </div>

    <banModal
      :showReason="false"
      :modalCheckBan="aboutBan.checkBan"
      @setModalCheckBan="setModalCheckBan"
      @banOkClick="modalBanOkClick"
      @banCancel="banCancel"></banModal>

  </div>
</template>

<script>
  import tableBox from '@/components/Table/VueTable.vue'
  import tableSearch from '@/components/Table/TableSearch.vue'
  import banModal from '@/components/banModal/banModal.vue';
  import until from '@/js/until.js'
  import checkBoxMixin from '@/mixins/checkBox.js';
  import { mapGetters } from 'vuex';
  const getLoading = until.globleLoading();

  export default {
    name: "ip_detail",

    components: {
      tableBox,
      tableSearch,
      banModal,
    },
    mixins: [checkBoxMixin],
    props: {
      user_id: {
        default: ''
      },
      // 父级模态框显示隐藏
      isDetail: {
        default: false,
      },
      user_info: {
        type: Object,
        default: () => {},
      }
    },
    data() {
      return {
        total: 0,
        keyword:'',
        pn: 1,
        page: 10,
        searchCol: [
          {
            title: this.$i18n.tc('views.ip_detail.userId'),
            key: 'keyword'
          }
        ],
        tablesList: [],
        titleList: this.getTitleList(),
        oldUser_id: null,
        aboutBan: {
          checkBan: false,
          showType: '',
        },
        handleParams: {
          modalBanOkClick: {},
        },
      }
    },
    computed: {
      ...mapGetters([
        'getLocale',
      ]),
    },
    created() {
      this.extraData = {
        push_id: this.user_info.push_id,
        login_ip: this.user_info.login_ip,
        user_no: this.user_info.user_no,
      };
      this.users()
    },
    methods: {
      timestampTime(data) {
        return until.timestampTime(data)
      },
      setModalCheckBan(value) {
        this.aboutBan.checkBan = value;
      },
      banCancel() {},
      modalBanOkClick(data) {
        this.handleParams.modalBanOkClick = data;
        if (this.aboutBan.showType === 'all') this.handleBanAll();
        else if (this.aboutBan.showType === 'path') this.handleBlockPath();
      },
      getTitleList() {
        return [
          // {
          //   title: this.$i18n.tc('views.ip_detail.chooseAll'),
          //   key: 'choose',
          //   type: 'custom',
          // },
          {
            title: this.$i18n.tc('views.ip_detail.loginUser'),
            key: 'user_no',
            type: 'custom',
          },
          {
            title: this.$i18n.tc('views.ip_detail.nickname'),
            key: 'nickname',
          },
          {
            title: this.$i18n.tc('views.ip_detail.country'),
            key: 'country_name',
          },
          {
            title: this.$i18n.tc('views.ip_detail.deviceCode'),
            key: 'push_id',
          },
          {
            title: this.$i18n.tc('views.ip_detail.wealth'),
            key: 'moto_contri_leave',
          },
          {
            title: this.$i18n.tc('views.ip_detail.charm'),
            key: 'moto_charm_leave',
          },
          {
            title: this.$i18n.tc('views.ip_detail.activeLevel'),
            key: 'moto_active_leave',
          },
          {
            title: this.$i18n.tc('views.ip_detail.loginIp'),
            key: 'login_ip'
          },
          {
            title: this.$i18n.tc('views.ip_detail.loginTime'),
            key: 'createtime',
            type: 'custom',
          },
          {
            title: this.$i18n.tc('views.ip_detail.lastLoginTime'),
            key: 'login_time',
            type: 'custom',
          },
        ];
      },
      // 转换时间
      timestampToTime(data) {
        return until.timestampToTime(data)
      },
      postClient() {
        this.pn = 1
        this.users()
      },
      allBlockClick() {
        this.aboutBan.checkBan = true;
        this.aboutBan.showType = 'all';
      },
      blockClick() {
        if (this.aboutCheck.checkAllGroup.length === 0) {
          this.$Message.error(this.$i18n.tc('views.moreUserUpList.enterBanUser'));
          return;
        };
        this.aboutBan.checkBan = true;
        this.aboutBan.showType = 'path';
      },
      handleBanAll() {
        let params = {
          login_ip: this.extraData.login_ip,
          push_id: this.extraData.push_id,
          user_no: this.keyword.trim(),
          time: this.handleParams.modalBanOkClick && this.handleParams.modalBanOkClick.time,
          model: 1,
        }
        if (this.keyword.trim()) {
          params.user_no = this.keyword.trim();
        }
        this.$http.allSelectBlockId(params, {
          method: this.handleBanAll,
          that: this,
        }).then(res => {
          if (Number(res.status) == 200) {
            this.pn = 1;

            getLoading.selfHide();
            getLoading.show();
            setTimeout(() => {
              getLoading.selfHide();
              this.users().then(res => {
                this.$Message.info(this.$i18n.tc('views.public.operatSuccess'))
              });
            }, 1000);

            this.aboutCheck.checkAllGroup = [];
            this.aboutCheck.checkAll = false;
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      handleBlockPath() {
        let membesStr = this.aboutCheck.checkAllGroup.join(',');
        this.$http.selectBlockId({
          members: membesStr,
          time: this.handleParams.modalBanOkClick && this.handleParams.modalBanOkClick.time,
          model: 1,
        }, {
          method: this.handleBlockPath,
          that: this,
        }).then(res => {
          if (Number(res.status) == 200) {
            this.users().then(res => {
              this.$Message.info(this.$i18n.tc('views.public.operatSuccess'));
            });
            this.aboutCheck.checkAllGroup = [];
            this.aboutCheck.checkAll = false;
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 切换页码
      changePage(pn) {
        this.pn = pn
        this.users()
      },
      // 数据请求
      users() {
        return this.$http.memberMoreIp({
          user_id: this.user_id,
          keyword: this.keyword.trim(),
          page: this.page,
          pn: this.pn,
        }, {
          method: this.users,
          that: this,
        }).then((res) => {
          if (Number(res.status) == 200) {
            this.tablesList = res.list;
            this.total = res.total;
            this.aboutCheck.checkAllGroup = [];
            this.aboutCheck.checkAll = false;
          } else {
            this.tablesList = []
            this.total = 0
            this.$Message.error(res.msg)
          }
        })
      }
    },
    watch: {
      getLocale: function() {
        this.searchCol[0].title = this.$i18n.tc('views.ip_detail.userId');
        this.titleList = this.getTitleList();
      },
      isDetail: function(newValue, oldValue) {
        // 查询不同的user_id时重新请求 且 模态框展示时
        if(newValue && this.user_id !== this.oldUser_id) {
          this.oldUser_id = this.user_id;
          this.keyword = '';
          this.users();
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  @function r($px) {
    @return $px/100*1rem;
  }
</style>
